!function ($) {
    const reqHeader = $('.reqHeader');//引入header.html的div
    const reqFooter = $('.reqFooter');
    const list = $('.list ul');
    
    reqHeader.load('../html/header.html');
    reqFooter.load('../html/footer.html');

    let apiUrl = 'http://10.31.162.37/underline/uniqloAPI/listdata.php'
    let array_default = [];//排序前的li数组
    let array = [];//排序中的数组
    let prev = null;
    let next = null;
    

    //默认渲染第一页 ------------start
    $.ajax({
        url: apiUrl,
        data: { page: 1 },
        dataType: 'json'
    }).done(data => {
        let str = '';
        $.each(data, function (index, value) {
            str += `
            <li>
            <a href="detail.html?sid=${value.sid}">
                <p class="activity">
                    <span>限时优惠</span>
                    <span>夏季大促</span>
                </p>
                <img class="lazy bpic" data-original="${value.url}" alt=""
                    >
                <div class="smlpic">
                    <img src="${value.piclisturl.split(',')[0]}" alt="">
                    <img src="${value.piclisturl.split(',')[1]}" alt="">
                    <img src="${value.piclisturl.split(',')[2]}" alt="">
                    <img src="${value.piclisturl.split(',')[3]}" alt="">
                </div>
                <p class="size">男装/女装/情侣装<span>XS-3XL</span></p>
                <h5>${value.title}</h5>
                <p class="price">￥${value.price}</p>
                <p class="stars">
                    <span class="iconfont icon-iconfontxingxing appraise"></span>
                    <span class="iconfont icon-iconfontxingxing appraise"></span>
                    <span class="iconfont icon-iconfontxingxing appraise"></span>
                    <span class="iconfont icon-iconfontxingxing appraise"></span>
                    <span class="iconfont icon-iconfontxingxing appraise"></span>
                    <span>(45)</span>
                </p>
            </a>
        </li>
            `;
        });
        list.html(str);
        array_default = [];//排序前的li数组
        array = [];//排序中的数组
        prev = null;
        next = null;

        //将页面的li元素加载到两个数组中
        $('.list ul li').each(function (index, element) {
            array[index] = $(this);
            array_default[index] = $(this);
        });
        console.log(array_default,array);
        //添加懒加载
        $(function () {
            $("img.lazy").lazyload({ effect: "fadeIn" });
        });
        for (let i = 0; i < array.length - 1; i++) {
            for (let j = 0; j < array.length - i - 1; j++) {
                prev = parseFloat(array[j].find('.price').html().substring(1));
                next = parseFloat(array[j + 1].find('.price').html().substring(1));
                //通过价格的判断，改变的是li的位置。
                if (prev > next) {
                    let temp = array[j];
                    array[j] = array[j + 1];
                    array[j + 1] = temp;
                }
            }
        }
        //清空原来的列表，将排序后的数据添加上去。
        //empty() : 删除匹配的元素集合中所有的子节点。
        // $('.list ul').empty();//清空原来的列表
        //这里能够省略empty
        //append在追加的时候，如果追加的是jquery的元素对象，而jquery元素对象在你追加的元素中存在，直接取出存在的元素，从后面追加。
        //如果追加的是内容结构，依然和appendChild一样，后面继续追加。
        $.each(array, function (index, value) {
            console.log(value);//n.fn.init [li, context: li]
            $('.list ul').append(value);
        });
    })
    //默认渲染第一页 ------------end
    //分页 ------------------start
    $('.page').pagination({
        pageCount: 6,//总的页数
        jump: true,//是否开启跳转到指定的页数，布尔值。
        coping: true,//是否开启首页和尾页，布尔值。
        prevContent: '上一页',
        nextContent: '下一页',
        homePage: '首页',
        endPage: '尾页',
        callback: function (api) {
            console.log(api.getCurrent());//获取的页码给后端
            $.ajax({
                url: apiUrl,
                data: {
                    page: api.getCurrent()
                },
                dataType: 'json'
            }).done(function (data) {
                let str = '';
                $.each(data, function (index, value) {
                    str += `
                    <li>
                    <a href="detail.html?id=${value.sid}">
                        <p class="activity">
                            <span>限时优惠</span>
                            <span>夏季大促</span>
                        </p>
                        <img src="${value.url}" alt=""
                            class="bpic">
                        <div class="smlpic">
                            <img src="${value.piclisturl.split(',')[0]}" alt="">
                            <img src="${value.piclisturl.split(',')[1]}" alt="">
                            <img src="${value.piclisturl.split(',')[2]}" alt="">
                            <img src="${value.piclisturl.split(',')[3]}" alt="">
                        </div>
                        <p class="size">男装/女装/情侣装<span>XS-3XL</span></p>
                        <h5>${value.title}</h5>
                        <p class="price">￥${value.price}</p>
                        <p class="stars">
                            <span class="iconfont icon-iconfontxingxing appraise"></span>
                            <span class="iconfont icon-iconfontxingxing appraise"></span>
                            <span class="iconfont icon-iconfontxingxing appraise"></span>
                            <span class="iconfont icon-iconfontxingxing appraise"></span>
                            <span class="iconfont icon-iconfontxingxing appraise"></span>
                            <span>(45)</span>
                        </p>
                    </a>
                </li>
                    `;
                });
                list.html(str);

                array_default = [];//排序前的li数组
                array = [];//排序中的数组
                prev = null;
                next = null;

                //将页面的li元素加载到两个数组中
                $('.list ul li').each(function (index, element) {
                    array[index] = $(this);
                    array_default[index] = $(this);
                });
                console.log(array_default,array);
            })
        }
    });
    //分页 ------------------end

    //排序 ------------------start
    $('button').eq(0).on('click', function () {
        for (let i = 0; i < array.length - 1; i++) {
            for (let j = 0; j < array.length - i - 1; j++) {
                prev = parseFloat(array[j].find('.price').html().substring(1));
                next = parseFloat(array[j + 1].find('.price').html().substring(1));
                //通过价格的判断，改变的是li的位置。
                if (prev > next) {
                    let temp = array[j];
                    array[j] = array[j + 1];
                    array[j + 1] = temp;
                }
            }
        }
        //清空原来的列表，将排序后的数据添加上去。
        //empty() : 删除匹配的元素集合中所有的子节点。
        // $('.list ul').empty();//清空原来的列表
        //这里能够省略empty
        //append在追加的时候，如果追加的是jquery的元素对象，而jquery元素对象在你追加的元素中存在，直接取出存在的元素，从后面追加。
        //如果追加的是内容结构，依然和appendChild一样，后面继续追加。
        $.each(array, function (index, value) {
            console.log(value);//n.fn.init [li, context: li]
            $('.list ul').append(value);
        });
    });
    $('button').eq(1).on('click', function () {
        for (let i = 0; i < array.length - 1; i++) {
            for (let j = 0; j < array.length - i - 1; j++) {
                prev = parseFloat(array[j].find('.price').html().substring(1));
                next = parseFloat(array[j + 1].find('.price').html().substring(1));
                //通过价格的判断，改变的是li的位置。
                if (prev < next) {
                    let temp = array[j];
                    array[j] = array[j + 1];
                    array[j + 1] = temp;
                }
            }
        }
        //清空原来的列表，将排序后的数据添加上去。
        //empty() : 删除匹配的元素集合中所有的子节点。
        // $('.list ul').empty();//清空原来的列表
        $.each(array, function (index, value) {
            console.log(value);
            $('.list ul').append(value);
        });
    })
    //排序 ------------------end
}(jQuery)